<template>
  <div class="workdate">
      <el-breadcrumb separator="/" class="work_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>工作日历</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="box">
          <div class="top">
             工作日历列表
          </div>
          <div class="btn">
              <el-button type="primary" @click="funa">新增</el-button>
              <!-- <el-button type="danger"  @click="deletes">删除</el-button> -->
          </div>
          <div class="bottom">
              <el-table class="my-table"  :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
                <!-- <el-table-column type="selection" width="55" align="center"/> -->
                <el-table-column type="index" width="70" label="序号" align="center" style="text-align: center;"/>
                <el-table-column prop="Rlname" label="工作日历名称" width="180" />
                <el-table-column prop="Rllist" label="工作日历类型" width="180" />
                <el-table-column prop="JQAP" label="同步国家节假日安排" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                      <el-button @click="showEditDrawer(scope.row)" type="primary"
                        text= 'primary'>编辑</el-button
                      >
                      <el-button @click="handleDelete(scope.row.id)" type="danger"
                        text= 'danger'>删除</el-button
                      >
                     </template>
                </el-table-column>

              </el-table>
              <!-- 弹出框 -->
              <el-dialog v-model="dialogFormVisible" title="编辑工作日历">
                <el-form :model="form">
                  <el-form-item label="工作日历名称:"  prop="name">
                    <el-input  v-model="form.Rlname" placeholder="请设置工作日历名称（最多30个汉字或字母）"/>
                  </el-form-item>

                   <el-form-item label="类型:" style="margin-top:15px">
                  <el-select v-model="form.Rllist" placeholder="请设置类型">
                      <el-option label="周" value="周" />
                      <el-option label="月" value="月" />
                      <el-option label="无固定休息日" value="无固定休息日" />
                  </el-select>
                  </el-form-item>

                  <el-form-item label="遇法定节假日自动排休:" style="margin-top:10px" >
                    <el-switch v-model="form.JQAP"/>
                  </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="bianji()">
                      修改
                    </el-button>
                  </span>
                </template>
              </el-dialog>
          </div>
      </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 路由的引入
import { useRouter } from "vue-router";
var $Router = useRouter()
// 表格中的数据
const tableData = ref([])

// 点击新增跳转至新增页面
var funa= ()=>{
  $Router.push('/index/Worktime_xinzeng')
}

// 发请求(工作日历列表)
onMounted(async()=>{
    var res = await service.GZRL()
    tableData.value=res.data
})
// 单个删除
var handleDelete = async(id)=>{
    var res= await service.GZRL_delete({id})
    console.log(id);
    ElNotification({
                title: "通知",
                message: "删除成功",
                type: "success",
                duration: 2000,
              });
    var res = await service.GZRL()
    tableData.value=res.data
}


// var ids = ref([])
// // // 选择多个工作日历表格数据
// var handleSelectionChange =(selection)=>{
//    ids.value=selection
// }
// var idd = ref('')
// // // 删除多选
// var deletes = (  )=>{
//    service.GZRL_deletess({ })
//   //   ids.value.forEach(item => {
//   //   // var res =  service.GZRL()
//   //   // tableData.value=res.data
//   //   });
// }

var dialogFormVisible = ref(false)
// 修改工作日历列表
var form = ref({
  id:'',
  Rlname: '',
  Rllist: '',
  JQAP: false,
  type: [],
  resource: '',
  desc: '',
})
// 点击编辑
var showEditDrawer = (admin)=>{
  dialogFormVisible.value=true
  form.value.Rlname=admin.Rlname
  form.value.Rllist=admin.Rllist
  form.value.id=admin.id
  console.log(form.value.id);
  form.value.JQAP=admin.JQAP==='是' ? true:false
  
}
// 工作日历列表的编辑
var bianji = async()=>{
  // var id =form.value.id
  form.value.JQAP = form.value.JQAP===true?'是':'否'
  var res =await service.GZRL_update(form.value)
  console.log(res.data);
  dialogFormVisible.value=false
  ElNotification({
                      title: "通知",
                      message: "编辑成功",
                      type: "success",
                      duration: 2000,
                    });
  // 更新数据库
  var res = await service.GZRL()
  tableData.value=res.data
}
</script>

<style scoped lang='scss'>
.workdate{
  .work_box{
    padding: 10px 15px;
    font-size: 14px;
  }
  .box{
    width: 1100px;
    height: 500px;
    box-sizing: border-box;
    background-color: white;
    .top{
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      padding:  10px 15px;
      font-weight: bold;
    }
    .btn{
      box-sizing: border-box;
      padding: 10px 15px;
    }
    .bottom{
      padding: 10px 15px;
      /* 圆形勾选框 */
      :deep(.el-checkbox__inner) {
        border-radius: 50%;
      }


    }
  }
}
</style>